import React, { PureComponent } from 'react';
import IceContainer from '@icedesign/container';
import { Grid, Message } from '@alifd/next';
import styles from './index.module.scss';
import classnames from 'classnames';
import WebStorageCache from 'web-storage-cache';
import PockCanvas from '../PockCanvas';
import { paddingList } from '@/utils/utils';
import CountDown from '@/components/CountDown';
import request from '../../../../utils/request';
import { host, stringCheck, TEAM_BLUE, TEAM_RED } from '../../../../const';

const wsCache = new WebStorageCache();

const { Row, Col } = Grid;


export default class Index extends PureComponent {
  static displayName = 'Index';

  static propTypes = {};

  static defaultProps = {};


  constructor(props) {
      super(props);
      this.state = {
          formPage: {},
      };
      this.humanRef1 = null;
      this.humanRef2 = null;
      this.humanRef3 = null;
      this.humanRef4 = null;
      this.humanRef5 = null;
      this.humanRef6 = null;
      this.humanRef7 = null;
      this.humanRef8 = null;
  }

  componentDidMount() {
      const formPage = JSON.parse(wsCache.get('formPage'));
      if (!formPage?.time) {
          window.location.href = '#/poke/set/create';
      } else {
          // eslint-disable-next-line react/no-did-mount-set-state
          this.setState({
              formPage,

          });
      }

      // mock
      //   setInterval(() => {
      //       this.handleRef1();
      //       this.handleRef2();
      //   }, 2000);
      this.handleSocket();
  }

  componentWillUnmount() {
      wsCache.set('formPage', '');
      //   this.callEnd();
  }
callEnd=() => {
    console.log('object');
    request({
        method: 'POST',
        url: `${host}/bayonet/stop`,
    }).then((res) => {
        const code = res?.data?.data;
        if (code === 200) {
            Message.success('关闭成功');
        }
    });
}

handleSocket() {
    const wsUrl = `ws://${host.substr(7)}/socket/bayonet`;
    const ws = new WebSocket(wsUrl);
    ws.onopen = () => {

    };
    ws.onmessage = (msg) => {
        const { formPage } = this.state;
        const list = formPage?.list;

        const msgJson = JSON.parse(msg.data);
        console.log('msgJson', msgJson);
        if (msgJson?.code === 0) {
            const oItem = msgJson?.data;

            let fIndex = -1;
            for (let i = 0; i < list?.length; i++) {
                if (Number(list[i].num1) === oItem.num) {
                    fIndex = list[i].index1;
                }
                if (Number(list[i].num2) === oItem.num) {
                    fIndex = list[i].index2;
                }
            }

            if (fIndex > -1) {
                oItem.index = fIndex;
            } else {
                console.log(' ws.onmessage 未找到对应的item.index');
                return;
            }


            this.handleRef1(oItem);
        }
    };

    ws.onclose = () => {

    };
}
  handleRef1 = (item) => {
      //   const mock = [
      //       '头部',
      //       '左胸',
      //       '右胸',
      //       '左臂',
      //       '右臂',
      //       '左腹',
      //       '右腹',
      //   ];
      //   item = {
      //       index: 3,
      //       num: 3, // 编号
      //       name: 'xxx', // 姓名
      //       team: 'red', // 红蓝方
      //       numOfHeadHits: 4, // 头部击中次数
      //       headHitsDataList: [1, 2, 3, 4], // 头部击中力量列表
      //       numOfLeftChestHits: 0, // 左胸击中次数
      //       leftChestHitsDataList: [], // 左胸击中力量列表
      //       numOfRightChestHits: 6, // 右胸击中次数
      //       rightChestHitsDataList: [1, 2, 3, 4, 5, 6], // 右胸击中力量列表
      //       numOfLeftArmHits: 0, // 左臂击中次数
      //       leftArmHitsDataList: [], // 左臂击中力量列表
      //       numOfRightArmHits: 0, // 右臂击中次数
      //       rightArmHitsDataList: [], // 右臂击中力量列表
      //       numOfLeftAbdomenHits: 0, // 左腹击中次数
      //       leftAbdomenHitsDataList: [], // 左腹击中力量列表
      //       numOfRightAbdomenHits: 0, // 右腹击中次数
      //       rightAbdomenHitsDataList: [], // 右腹
      //       numOfTotalHits: 10, // 总击中次数
      //       currentHitArea: mock[Math.floor(Math.random() * mock.length)],
      //   };
      const data = {
          count: item.numOfTotalHits,
          pokeList: [
              { position: '头部', times: item.numOfHeadHits, list: paddingList(item.headHitsDataList) },
              { position: '左胸', times: item.numOfLeftChestHits, list: paddingList(item.leftChestHitsDataList) },
              { position: '右胸', times: item.numOfRightChestHits, list: paddingList(item.rightChestHitsDataList) },
              { position: '左臂', times: item.numOfLeftArmHits, list: paddingList(item.leftArmHitsDataList) },
              { position: '右臂', times: item.numOfRightArmHits, list: paddingList(item.rightArmHitsDataList) },
              { position: '左腹', times: item.numOfLeftAbdomenHits, list: paddingList(item.leftAbdomenHitsDataList) },
              { position: '右腹', times: item.numOfRightAbdomenHits, list: paddingList(item.rightAbdomenHitsDataList) },
          ],
      };
      this[`humanRef${item.index}`]?.setState({
          ...data,
      });
      this[`humanRef${item.index}`]?.doKill(item.currentHitArea);
  }

    //   handleRef2 = (item) => {
    //       //   const mock = [
    //       //       '头部',
    //       //       '左胸',
    //       //       '右胸',
    //       //       '左臂',
    //       //       '右臂',
    //       //       '左腹',
    //       //       '右腹',
    //       //   ];
    //       //   item = {
    //       //       index: 4,
    //       //       num: 3, // 编号
    //       //       name: 'xxx', // 姓名
    //       //       team: 'red', // 红蓝方
    //       //       numOfHeadHits: 4, // 头部击中次数
    //       //       headHitsDataList: [1, 2, 3, 4], // 头部击中力量列表
    //       //       numOfLeftChestHits: 0, // 左胸击中次数
    //       //       leftChestHitsDataList: [], // 左胸击中力量列表
    //       //       numOfRightChestHits: 6, // 右胸击中次数
    //       //       rightChestHitsDataList: [1, 2, 3, 4, 5, 6], // 右胸击中力量列表
    //       //       numOfLeftArmHits: 0, // 左臂击中次数
    //       //       leftArmHitsDataList: [], // 左臂击中力量列表
    //       //       numOfRightArmHits: 0, // 右臂击中次数
    //       //       rightArmHitsDataList: [], // 右臂击中力量列表
    //       //       numOfLeftAbdomenHits: 0, // 左腹击中次数
    //       //       leftAbdomenHitsDataList: [], // 左腹击中力量列表
    //       //       numOfRightAbdomenHits: 0, // 右腹击中次数
    //       //       rightAbdomenHitsDataList: [], // 右腹
    //       //       numOfTotalHits: 10, // 总击中次数
    //       //       currentHitArea: mock[Math.floor(Math.random() * mock.length)],
    //       //   };
    //       const data = {
    //           count: item.numOfTotalHits,
    //           pokeList: [
    //               { position: '头部', times: item.numOfHeadHits, list: paddingList(item.headHitsDataList) },
    //               { position: '左胸', times: item.numOfLeftChestHits, list: paddingList(item.leftChestHitsDataList) },
    //               { position: '右胸', times: item.numOfRightChestHits, list: paddingList(item.rightChestHitsDataList) },
    //               { position: '左臂', times: item.numOfLeftArmHits, list: paddingList(item.leftArmHitsDataList) },
    //               { position: '右臂', times: item.numOfRightArmHits, list: paddingList(item.rightArmHitsDataList) },
    //               { position: '左腹', times: item.numOfLeftAbdomenHits, list: paddingList(item.leftAbdomenHitsDataList) },
    //               { position: '右腹', times: item.numOfRightAbdomenHits, list: paddingList(item.rightAbdomenHitsDataList) },
    //           ],
    //       };
    //       this[`humanRef${item.index}`]?.setState({
    //           ...data,
    //       });
    //       this[`humanRef${item.index}`]?.doKill(item.currentHitArea);
    //   }

  render() {
      const { formPage } = this.state;
      const times = formPage.time * 1000;
      const panel1 = formPage?.list?.find(i => i.panel === 1);
      const panel2 = formPage?.list?.find(i => i.panel === 2);
      const panel3 = formPage?.list?.find(i => i.panel === 3);
      const panel4 = formPage?.list?.find(i => i.panel === 4);
      return (

          <IceContainer className={classnames('lite-table', styles.wrap)}>

              <Row >
                  <Col span={12} id="item1" className={classnames(styles.itemWrap, styles.item1, 'flex')} >
                      <div className="box" >
                          {
                              panel1 ?
                                  <PockCanvas ref={node => this.humanRef1 = node} uniqueName="1" type="red" />
                                  : null
                          }

                      </div>
                      <div className="box" >
                          {
                              panel1 ?
                                  <PockCanvas ref={node => this.humanRef2 = node} uniqueName="2" type="blue" />

                                  : null
                          }

                      </div>

                      {
                          panel1 && times ?
                              <div className={styles.countDown} >

                                  <CountDown times={times} />
                              </div>
                              : null
                      }
                  </Col>
                  <Col span={12} className={classnames(styles.itemWrap, styles.item2, 'flex')}>
                      <div className="box" >
                          {
                              panel2 ?
                                  <PockCanvas ref={node => this.humanRef3 = node} uniqueName="3" type="red" />
                                  : null
                          }

                      </div>
                      <div className="box" >
                          {
                              panel2 ?
                                  <PockCanvas ref={node => this.humanRef4 = node} uniqueName="4" type="blue" />

                                  : null
                          }

                      </div>
                      {
                          panel2 && times ?
                              <div className={styles.countDown} >

                                  <CountDown times={times} />
                              </div>
                              : null
                      }
                  </Col>
              </Row>

              <Row >
                  <Col span={12} className={classnames(styles.itemWrap, styles.item3, 'flex')}>

                      <div className="box" >
                          {
                              panel3 ?
                                  <PockCanvas ref={node => this.humanRef5 = node} uniqueName="5" type="red" />
                                  : null
                          }

                      </div>
                      <div className="box" >
                          {
                              panel3 ?
                                  <PockCanvas ref={node => this.humanRef6 = node} uniqueName="6" type="blue" />

                                  : null
                          }

                      </div>
                      {
                          panel3 && times ?
                              <div className={styles.countDown} >

                                  <CountDown times={times} />
                              </div>
                              : null
                      }
                  </Col>
                  <Col span={12} className={classnames(styles.itemWrap, styles.item4, 'flex')} >
                      <div className="box" >
                          {
                              panel4 ?
                                  <PockCanvas ref={node => this.humanRef7 = node} uniqueName="7" type="red" />
                                  : null
                          }

                      </div>
                      <div className="box" >
                          {
                              panel4 ?
                                  <PockCanvas ref={node => this.humanRef8 = node} uniqueName="8" type="blue" />

                                  : null
                          }

                      </div>
                      {
                          panel4 && times ?
                              <div className={styles.countDown} >

                                  <CountDown times={times} />
                              </div>
                              : null
                      }
                  </Col>
              </Row>


          </IceContainer>

      );
  }
}
